<template>
  <div>
    <el-input value="public-choice"
              placeholder="请选择预期时间"
              v-model="time"
              @focus="selectListShow = true">
      <i class="el-icon-error el-input__icon"
         slot="suffix"
         @click="clearTime">
      </i>
    </el-input>

    <div v-if="selectListShow"
         class="time-picker-container">
      <!-- minute -->
      <div class="time-picker-list">
        <div class="time-picker-minute"
             :style="{'top':topMinute+'px'}">
          <div class="time-picker-item"
               @click="handleSelectMinute(i)"
               @mousewheel.stop="handleScrollMinute"
               :style="{'color':minute.select?'#409EFF':'#606266',
                      'fontWeight':minute.select?'700':'400',
                      'background':minute.select?'#f5f7fa':'transparent'}"
               v-for="(minute,i) in minutelist"
               :key="minute.value">{{minute.value}}
          </div>
        </div>
      </div>
      <!-- second -->
      <div class="time-picker-list">
        <div class="time-picker-minute"
             :style="{'top':topSecond+'px'}">
          <div class="time-picker-item"
               @click="handleSelectSecond(i)"
               @mousewheel.stop="handleScrollSecond"
               :style="{'color':second.select?'#409EFF':'#606266',
                      'fontWeight':second.select?'700':'400',
                      'background':second.select?'#f5f7fa':'transparent'}"
               v-for="(second,i) in secondlist"
               :key="second.value">{{second.value}}
          </div>
        </div>
      </div>
      <!-- arrow -->
      <i class="el-icon-caret-top time-picker-arrow"></i>
      <!-- button -->
      <el-button type="primary"
                 @click="selectListShow = false">确定</el-button>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      selectListShow: true,
      // 分列表
      minutelist: [
        {
          value: 0
        },
        {
          value: 1
        },
        {
          value: 2
        },
        {
          value: 3
        },
        {
          value: 4
        },
        {
          value: 5
        },
        {
          value: 6
        },
        {
          value: 7
        },
        {
          value: 8
        },
        {
          value: 9
        },
        {
          value: 10
        },
        {
          value: 11
        },
        {
          value: 12
        },
        {
          value: 13
        },
        {
          value: 14
        },
        {
          value: 15
        },
        {
          value: 16
        },
        {
          value: 17
        },
        {
          value: 18
        },
        {
          value: 19
        },
        {
          value: 20
        },
        {
          value: 21
        },
        {
          value: 22
        },
        {
          value: 23
        },
        {
          value: 24
        },
        {
          value: 25
        },
        {
          value: 26
        },
        {
          value: 27
        },
        {
          value: 28
        },
        {
          value: 29
        },
        {
          value: 30
        },
        {
          value: 31
        },
        {
          value: 32
        },
        {
          value: 33
        },
        {
          value: 34
        },
        {
          value: 35
        },
        {
          value: 36
        },
        {
          value: 37
        },
        {
          value: 38
        },
        {
          value: 39
        },
        {
          value: 40
        },
        {
          value: 41
        },
        {
          value: 42
        },
        {
          value: 43
        },
        {
          value: 44
        },
        {
          value: 45
        },
        {
          value: 46
        },
        {
          value: 47
        },
        {
          value: 48
        },
        {
          value: 49
        },
        {
          value: 50
        },
        {
          value: 51
        },
        {
          value: 52
        },
        {
          value: 53
        },
        {
          value: 54
        },
        {
          value: 55
        },
        {
          value: 56
        },
        {
          value: 57
        },
        {
          value: 58
        },
        {
          value: 59
        }
      ],
      // 秒列表
      secondlist: [
        {
          value: 0
        },
        {
          value: 1
        },
        {
          value: 2
        },
        {
          value: 3
        },
        {
          value: 4
        },
        {
          value: 5
        },
        {
          value: 6
        },
        {
          value: 7
        },
        {
          value: 8
        },
        {
          value: 9
        },
        {
          value: 10
        },
        {
          value: 11
        },
        {
          value: 12
        },
        {
          value: 13
        },
        {
          value: 14
        },
        {
          value: 15
        },
        {
          value: 16
        },
        {
          value: 17
        },
        {
          value: 18
        },
        {
          value: 19
        },
        {
          value: 20
        },
        {
          value: 21
        },
        {
          value: 22
        },
        {
          value: 23
        },
        {
          value: 24
        },
        {
          value: 25
        },
        {
          value: 26
        },
        {
          value: 27
        },
        {
          value: 28
        },
        {
          value: 29
        },
        {
          value: 30
        },
        {
          value: 31
        },
        {
          value: 32
        },
        {
          value: 33
        },
        {
          value: 34
        },
        {
          value: 35
        },
        {
          value: 36
        },
        {
          value: 37
        },
        {
          value: 38
        },
        {
          value: 39
        },
        {
          value: 40
        },
        {
          value: 41
        },
        {
          value: 42
        },
        {
          value: 43
        },
        {
          value: 44
        },
        {
          value: 45
        },
        {
          value: 46
        },
        {
          value: 47
        },
        {
          value: 48
        },
        {
          value: 49
        },
        {
          value: 50
        },
        {
          value: 51
        },
        {
          value: 52
        },
        {
          value: 53
        },
        {
          value: 54
        },
        {
          value: 55
        },
        {
          value: 56
        },
        {
          value: 57
        },
        {
          value: 58
        },
        {
          value: 59
        }
      ],
      // 选择的分
      minuteSelected: '00',
      // 选择的秒
      secondSelected: '00',
      i: 0,
      topMinute: 0,
      topSecond: 0
    };
  },
  computed: {
    time() {
      return this.minuteSelected + '分' + this.secondSelected + '秒'
    }
  },
  mounted() {
    // 监听滚轮事件
    window.addEventListener('scroll', this.handleScrollMinute, true);
    window.addEventListener('scroll', this.handleScrollSecond, true);
  },
  methods: {
    // 选择分钟
    handleSelectMinute(i) {
      // 找出已选择项，并重置之
      const index = this.minutelist.findIndex(function (value, index, arr) {
        return value.select === true;
      })
      if (index !== -1) {
        this.minutelist[index].select = false
      }
      // 解构value,并设定select为true
      const { value } = this.minutelist[i]
      this.minuteSelected = value
      this.minutelist[i].select = true
    },
    // 选择秒钟
    handleSelectSecond(i) {
      // 找出已选择项，并重置之
      const index = this.secondlist.findIndex(function (value, index, arr) {
        return value.select === true;
      })
      if (index !== -1) {
        this.secondlist[index].select = false
      }
      // 解构value,并设定select为true
      const { value } = this.secondlist[i]
      this.secondSelected = value
      this.secondlist[i].select = true
    },
    // 重置时间
    clearTime() {
      this.minuteSelected = this.secondSelected = '00'
    },
    // 鼠标滚轮：选择分
    handleScrollMinute(e) {
      // wheelDelta兼容IE,Opera,Chrome，detail兼容Firefox
      if (e.wheelDelta > 0 || e.detail > 0) {
        // 向上滚动
        if (this.minuteSelected > 0) {
          // this.minuteSelected--
          if (this.topMinute < 0) {
            this.topMinute += 35
          }
        }
      } else if (e.wheelDelta < 0 || e.detail < 0) {
        // 向下滚动
        if (this.minuteSelected < 59) {
          // this.minuteSelected++
          if (this.topMinute > -1925) {
            this.topMinute -= 35
          }
        }
      }
    },
    // 鼠标滚轮：选择秒
    handleScrollSecond(e) {
      // wheelDelta兼容IE,Opera,Chrome，detail兼容Firefox
      if (e.wheelDelta > 0 || e.detail > 0) {
        // 向上滚动
        if (this.secondSelected > 0) {
          this.secondSelected--
          if (this.topSecond < 0) {
            this.topSecond += 35
          }
        }
      } else if (e.wheelDelta < 0 || e.detail < 0) {
        // 向下滚动
        if (this.secondSelected < 59) {
          this.secondSelected++
          if (this.topSecond > -1925) {
            this.topSecond -= 35
          }
        }
      }
    },
  },
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
@import '../styles/timepicker.scss';
</style>
